
<template>
	<view class="page">
		<view class="padding-bottom-150" style="padding-bottom: 150rpx;">
			<form class="flowform">
				<formControl v-for="(item,index) in filedList.fields" :key='index' :item='item' :formData='formData' :options='options' :isId='isId' :scanType='scanType'/>
				<!-- 底部按钮 -->
				<view class="buttom-box">
					<view class="flow-button">
						<button class="btn-same btn-keep" @tap='back'>{{filedList.cancelButtonText}}</button>
						<button class="btn-same btn-submit" form-type="submit" @tap='save'>{{filedList.confirmButtonText}}</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	import jnpf from '@/common/js/jnpf.js'
	import flowbefore from '@/components/work/flow-before.vue'
	import formControl from '@/components/formControl/formControl.vue'
	export default {
		components: {
			flowbefore,
			formControl
		},
		data() {
			return {
				tableVmodel: [],
				status: '', //流程状态
				disabled: false, //启用
				requiredList:[],
				isBtnClicks: false,
				options:[],
				id: "",
				dynamicList:[],
				//主表

				filedList: {}, //主表list
				formData: {}, //主表model
				
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				featuresId: '',
				isId: false,
				id: '',
				dynamicModel: {},
				initData: {
					_formData: [],
					_columnData: [],
					_filedList: [],
					columnData: [],
					_flowTables: 0
				},
				wirteBackData: null,
				dictionaryTreeOptins: [],
				tableName: '',
				isToUpperCase: true,
				/* 转换为大写字母  .toLowerCase()转换为小写字母*/
				request: {
					apiKey: '',
					baseUrlObj: '',
					baseUrl: '',
					token: ''
				},
				scanType: false,
			};
		},

		/* 点击返回按钮清除缓存 */
		onBackPress(e) {
			this.$helper.removeStorage();
		},
		// #ifdef MP
		onUnload(e) {
			this.$helper.removeStorage();
		},
		// #endif


		onLoad(e) {
			/* 动态修改标题 */
			let title = uni.getStorageSync("title");
			uni.setNavigationBarTitle({
				title:title.F_FullName
			});
			
			
			
			
			
			
			this.scanType = e.type
			/* 请求接口url，token */
			this.request.apiKey = uni.getStorageSync('apiKey');
			this.request.baseUrlObj = config.Global.baseUrl;
			this.request.baseUrl = config.Global.baseUrl[this.request.apiKey].apiUrl;
			this.request.token = uni.getStorageSync(config.Global.cache + '_Token');
			/* 判断url里面有没有id 返回true/false  修改表单的id*/
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.id = e.id
			this.featuresId = e.featuresId
			this.init(this.featuresId)
		},

		methods: {
			/* 回写请求 */
			async wirteBack(){
				
				let _this = this;
				const res = await this.$helper.ajaxPromise({
					url: '/api/visualdev/OnlineDev/App/' +_this.featuresId+"/"+_this.id,
				})
				// console.log("回写数据1",res)
				if(res.statusCode != 200 || res.data.code != 200){
					this.$helper.msg('系统繁忙')
					return
				}
				_this.formData = JSON.parse(res.data.data.data);
				
			},
			
			
			/* 初始化请求 */
			async init(id) {
				const res= await this.$helper.ajaxPromise({
					url: '/api/visualdev/OnlineDev/App/' + id + '/Config',
				})
				
				if(res.statusCode != 200 || res.data.code != 200){
					return
				}
				let initData = res.data.data.formData
				initData = JSON.parse(initData)
				this.filedList = initData
				console.log("主表3", this.filedList)
				const fields = this.filedList.fields
				let propsUrl = [];
				for (let i = 0; i < fields.length; i++) {
					
					const _model  = fields[i].__vModel__;
					if(fields[i].__config__.required == true){
						this.$set(this.requiredList,_model,fields[i].__config__.label)
					}
					
					if(fields[i].__config__.jnpfKey=='radio' || fields[i].__config__.jnpfKey=='checkbox' || fields[i].__config__.jnpfKey=='select'){
						let _options = [];
						if(fields[i].__config__.dataType == 'static'){
							if(fields[i].__slot__){
								_options =  fields[i].__slot__.options;
								
							}else if(fields[i].__config__.options){
								_options = fields[i].__config__.options;
							}
						}else if( fields[i].__config__.dataType == 'dictionary'){
							_options = jnpf.dictionaryData(fields[i].__config__.dictionaryType)
							// /* 级联和树形选择器 */
							// this.dictionaryTreeOptins = _options
							
						}else if(fields[i].__config__.dataType == 'dynamic'){
							let propsUrl = fields[i].__config__.propsUrl;
							await this.dynamicSelect(propsUrl)
							_options =  this.dynamicList;
						}
						this.$set(this.options,""+_model+"",_options);
						
					}else if(fields[i].__config__.jnpfKey=='treeSelect' || fields[i].__config__.jnpfKey=='cascader'){
						let _options = [];
						if(fields[i].__config__.dataType == 'static'){
							_options = fields[i].options;
							
						}else if(fields[i].__config__.dataType == 'dictionary'){
							_options = jnpf.dictionaryData(fields[i].__config__.dictionaryType)
						}else if(fields[i].__config__.dataType == 'dynamic'){
							let propsUrl = fields[i].__config__.propsUrl;
							await this.dynamicSelect(propsUrl)
							_options =  this.dynamicList;
						}
						this.$set(this.options,""+_model+"",_options);
						
					}
					
					/* 子表 */
					if (fields[i].__config__.jnpfKey == 'table') {
						// console.log('子表')
						this.tableVmodel.push(fields[i].__vModel__);
						let item = {}
						for (var j = 0; j < fields[i].__config__.children.length; j++) {
							let e = fields[i].__config__.children[j]
							const _childVModel  = e.__vModel__;
							if(e.__config__.jnpfKey=='radio' || e.__config__.jnpfKey=='checkbox' || e.__config__.jnpfKey=='select'){
								 let _options = [];
								 
								 if(e.__config__.dataType == 'static'){
									if(e.__slot__){
										_options =  e.__slot__.options;
										
									}else if(e.__config__.options){
										_options = e.__config__.options;
									}
								 }else if(e.__config__.dataType == 'dictionary'){
									_options = jnpf.dictionaryData(e.__config__.dictionaryType)
									
								 }else if(e.__config__.dataType == 'dynamic'){
									 let propsUrl = e.__config__.propsUrl;
									 await this.dynamicSelect(propsUrl)
									 _options =  this.dynamicList;
									 
								 }
								 
								 //子表下拉的list
								this.$set(this.options,_childVModel,_options)
								 
								 
							}else if(e.__config__.jnpfKey=='treeSelect' || e.__config__.jnpfKey=='cascader'){
								let _options = [];
								if(e.__config__.dataType == 'static'){
									_options = e.options;
									
								}else if(e.__config__.dataType == 'dictionary'){
									_options = jnpf.dictionaryData(e.__config__.dictionaryType)
								}else if(e.__config__.dataType == 'dynamic'){
									let propsUrl = e.__config__.propsUrl;
									await this.dynamicSelect(propsUrl)
									_options =  this.dynamicList;
								}
								this.$set(this.options,_childVModel,_options)
							}
							// if(e.__config__.defaultValue != ''){
							// 	item[e.__vModel__] = e.__config__.defaultValue
							// }
						}
						this.formData[fields[i].__vModel__] = [item];
					}
				}
				/* 回写请求 */
				if(this.isId){
					this.wirteBack()
				}
			},
			
			dynamicSelect(id) {
				let _this = this
				return new Promise((resolve,reject) => {
					uni.request({
						url: _this.request.baseUrl+'/api/system/Base/DataInterface/'+id+'/Actions/Response',
						header: {
							'Authorization': _this.request.token ,//自定义请求头信息
							'content-type': 'application/json;charset=UTF-8'
						},
						method:'GET',
						success: (res) => {
							let treedata = res.data.data;
							_this.dynamicList = treedata;
							
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			
			back(){
				uni.navigateBack();
			},
			
			/* 保存 */
			save(e) {
				if(this.scanType)return this.$helper.msg('功能预览不支持数据保存')
				let _data ={
					data:JSON.stringify(this.formData)
				}
				
				let method = "POST";
				let url = "/api/visualdev/OnlineDev/App/"+this.featuresId;
				if(this.isId){
					method = "PUT";
					url=url+"/"+this.id;
					_data ={
						data:JSON.stringify(this.formData),
						id:this.id,
					}
				}
				console.log(this.requiredList)
				for(let key in this.requiredList){
					if(this.formData[key] == undefined){
						this.$helper.msg(this.requiredList[key]+'为必填')
						return;
					}
				}
				this.$helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:_data,
					success: res => {
						this.removeStorage()
						uni.navigateBack();
						this.isBtnClicks=false
					}
				})
				
			},
			
			/* 清除缓存 */
			removeStorage(){
				/* 删除缓存 */
				uni.removeStorageSync("item");
				uni.removeStorageSync("index");
				uni.removeStorageSync("rangData");
				uni.removeStorageSync("rangeIndex");
				uni.removeStorageSync("startedTitle");
				uni.removeStorageSync("F_FullName");
				uni.removeStorageSync("F_Category");
				uni.removeStorageSync("type");
				uni.removeStorageSync("F_Status");
				uni.removeStorageSync("obj");
				uni.removeStorageSync("_filedList");
			},
		}
	}
</script>

<style scoped lang="scss">
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: center;
		padding: 15px;
		height: 500rpx;
		overflow-y: scroll;
	}


	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// justify-content: center;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}



















	.required {
		color: red;
	}


	// .formlistInfo{
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: space-between;
	// 	align-items: center;
	// }
	.inputBox {
		flex-grow: 2;
		padding: 20rpx 10rpx;
		position: relative;

		input {
			color: #9A9A9A;
			font-size: 30rpx;
		}
	}

	//单行输入
	// .singleinputBox{
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;

	// }

	/* 文本框 */
	// .text-box{
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: flex-start;
	// 	// margin-bottom: 10px;
	// 	padding: 30rpx 20rpx;
	// 	text-align: center;
	// 	.textBoxLableTitle{
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: flex-start;
	// 		align-items: center;
	// 		// padding-bottom: 30rpx;
	// 	}
	// }

	/* 数字框 */
	.numberBox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 0;
	}

	/*密码框 */
	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 18rpx 10rpx;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;

		align-items: center;

		input {
			width: 100%;
			padding-right: 10rpx;
		}

		.ym-custom-close-circle-outline {
			font-size: 26rpx;
			color: #9A9A9A;
		}

		.ym-custom-eye {
			color: #9A9A9A;
			margin-left: 10rpx;
		}

		.uni-eye-active {
			color: #007AFF;
		}
	}

	/* 评分 */
	.example-body {
		/* #ifndef APP-NVUE */
		// display: flex;
		/* #endif */
		// flex-direction: row;
		// flex-wrap: wrap;
		// justify-content: center;
		// padding: 0;
		// font-size: 14px;
		// background-color: #ffffff;
	}

	/* 开关 */
	// .switch{
	// 	width: 100%;
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: flex-start;
	// 	padding: 20rpx 0;
	// }
	/* 分割线 */
	.splitLine {
		padding: 50rpx 0;
		position: relative;

		.txtBox {
			position: absolute;
			top: 0;
			left: 50%;
			background-color: #FFFFFF;
			padding: 25rpx 25rpx;
			transform: translate(-50%, 0);
			z-index: 9;
		}
	}

	/* 图片上传 */
	// .cell-pd {
	// 	padding: 22rpx 30rpx;
	// }

	// /* 部门级联 */
	// .TreeSelect{
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: flex-start;
	// 	padding: 22rpx 0;
	// }
	// .treeBox{
	// 	width: 100%;
	// 	height: 100%;
	// 	position: absolute;
	// 	top: 0;
	// 	background-color: #FFFFFF;
	// 	overflow-y: scroll;
	// 	left: 0;
	// }
</style>
